<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>修改套餐</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="stylesheet" href="/lib/layui-v2.5.4/css/layui.css" media="all">
    <link rel="stylesheet" href="/css/public.css" media="all">
    <script src="/lib/layui-v2.5.4/layui.js" charset="utf-8"></script>
</head>
<body>
<form class="layui-form" action="">
    <div class="layui-form-item">
        <div class="layui-inline">
            <label class="layui-form-label">套餐名称：</label>
            <div class="layui-input-inline">
                <input type="tel" name="pname" th:value="${package.pname}" autocomplete="off" class="layui-input">
                <input type="hidden" name="id" th:value="${package.pid}">
            </div>
        </div>
        <div class="layui-inline">
            <label class="layui-form-label">套餐价格：</label>
            <div class="layui-input-inline">
                <input type="text" name="price" th:value="${package.price}" autocomplete="off" class="layui-input">
            </div>
        </div>
    </div>

    <div class="layui-form-item">
        <label class="layui-form-label">会员类型：</label>
        <div class="layui-input-block">
            <span th:each="v,vstart:${vip}">
                 <input type="radio"  th:if="${v.id == package.vipid}" th:name="vipid" th:value="${v.id}"
                        th:title="${v.vname}" checked>
                <input type="radio" th:if="${v.id != package.vipid}" th:name="vipid"
                       th:value="${v.id}"
                       th:title="${v.vname}">
            </span>

            <!-- <input type="checkbox" name="like[2]" title="阅读" checked="">
             <input type="checkbox" name="like[3]" title="游戏">-->
        </div>
    </div>

    <div class="layui-form-item">
        <label class="layui-form-label">套餐状态：</label>
        <div class="layui-input-block">
            <span th:if="${package.istrue==0}">
                <input type="radio" name="start"  value="1" title="激活" >
                <input type="radio" name="start"  value="0" title="不激活" checked="">
            </span>
            <span th:if="${package.istrue==1}">
                <input type="radio" name="start"  value="1" title="激活" checked="">
                <input type="radio" name="start"  value="0" title="不激活" >
            </span>

        </div>
    </div>

    <!-- <fieldset class="layui-elem-field layui-field-title" style="margin-top: 30px;">
         <legend>选择产品</legend>
     </fieldset>
     <div id="test1" class="demo-transfer"></div>-->
    <fieldset class="layui-elem-field group" style="margin-bottom: 30px;">
        <legend>产品列表</legend>
        <div class="group-meal2" style="margin-top: 1%; text-align: left; margin-left: 10%;"
             th:each="pr,index:${producesList}">
            <p style="display: inline-block;width: 25%;">
                <span name="name" th:data="${pr.id}" th:text="${pr.name}"></span>
            </p>
            <p style="width: 26%;display: inline-block;">
                <span style="color: #bbbbbb">￥</span> &nbsp;<span class="unit-price" th:text="${pr.price}"></span>
            </p>
            <div class="layui-btn-group" style="display: inline-block;width: 16%;">
                <button type="button" style="width: 20%;" class="layui-btn layui-btn-sm add"><i class="layui-icon"></i>
                </button>
                <button type="button" style="width: 20%; background: #d9dada;color: #0C0C0C"
                        class="layui-btn layui-btn-sm sum" th:text="${pr.num}">0
                </button>
                <button type="button" style="width: 20%;" class="layui-btn layui-btn-sm minus"><i
                        class="layui-icon">–</i></button>
            </div>
            <div style="display: inline-block;width: 19%;"><span style="color: #bbbbbb">￥</span>&nbsp;<span
                    class="group-sum  groupSum2" style="font-size: 20px;" th:text="${pr.price*pr.num}">0.00</span></div>
        </div>
        <div style="width: 62%;margin-top: 4%;" class="group">
            <span style="font-size: 26px;">合计：</span>
            <p style="display: inline-block;line-height: 38px;float: right;font-size: 24px;">
                <span style="color: #bbbbbb">￥</span>&nbsp;
                <span class="sums" th:text="${sums}">0.00</span>
            </p>
        </div>
        <div class="layui-form-item layui-form-text" style="width: 50%;margin-top: 2%;">
            <label class="layui-form-label">描述信息：</label>
            <div class="layui-input-block">
                <textarea name="desc" placeholder="请输入内容" class="layui-textarea" th:text="${package.desci}"></textarea>
            </div>
        </div>
        <div class="layui-form-item">
            <div class="layui-input-block">
                <button type="button" class="layui-btn" onclick="history.go(-1)">返回</button>
                <button type="submit" class="layui-btn" lay-submit="" lay-filter="sub">立即提交</button>
                <button type="reset" class="layui-btn layui-btn-primary" onclick="window.location.reload()">重置</button>
            </div>
        </div>
    </fieldset>

</form>
<script>
    layui.use(['transfer', 'layer', 'util', 'form'], function () {
        var $ = layui.$
            , form = layui.form
            , transfer = layui.transfer
            , layer = layui.layer
            , util = layui.util;
        //基础效果
        /*  $.get("/pac/getPro",function (data) {
              console.log(data);
              transfer.render({
                  elem: '#test1'
                  ,title:["所有产品","已拥有的产品"]
                  ,data:JSON.parse(data)
                  ,value: [[${pagePros}]]
              })
          });*/
        $(".add").click(function () {
            var sum = parseInt($(this).next(".sum").text()) + 1;
            $(this).next(".sum").text(sum);
            groupPrice($, sum, this);
        });
        $(".minus").click(function () {
            var sum = parseInt($(this).prev(".sum").text()) - 1;
            if (sum < 0) {
                return false;
            }
            $(this).prev(".sum").text(sum);
            groupPrice($, sum, this)
        });

        /*计算价格和总价*/
        function groupPrice($, sum, thist) {
            var price = parseFloat($(thist).parent().prev().children(".unit-price").html());
            var sumPrice = sum * price;
            $(thist).parent().next().children(".group-sum").text(sumPrice);
            var sums = 0;
            $(".group-meal2").each(function () {
                sums = sums + parseInt($(this).find(".group-sum").text());
            });
            $(".sums").text(sums);
        }

        function getProPrices() {
            var arr = [];
            $(".group-meal2").each(function () {
                var sum = parseInt($(this).find(".group-sum").text());
                if (sum > 0) {
                    var name = $(this).find("span[name='name']").text();
                    var id = $(this).find("span[name='name']").attr("data");
                    var num = $(this).find("button.sum").text();
                    arr.push({id: id, name: name, num: num});
                }
            });
            return arr;
        }

        form.on('submit(sub)', function (data) {
            // var sums = $(".sums").text(); //总价
            var pack = [];
            var pname = data.field.pname; //套餐名称
            var price = data.field.price;//套餐价格
            var id = data.field.id;//套餐id
            var istrue = data.field.start;//套餐状态
            var desc = data.field.desc;//套餐状态
            var vipid = data.field.vipid;
            pack.push({pid: id, pname: pname, price: price, vipid: vipid, istrue: istrue, desci: desc});
            var jsondata = {"pack": pack, "pro": getProPrices()};
            /*"/pac/modifyPackage", JSON.stringify(jsondata), function (data) {
                console.log(data);
            }*/
            console.log(pack);
            $.ajax({
                dataType: "json",
                traditional: true,
                url: "/pac/modifyPackage",
                contentType: 'application/json;charset=UTF-8',
                data: JSON.stringify(jsondata),
                type: "post",
                success: function (data) {
                    layer.alert(data.info, function () {
                        window.location.href="/pac/paclist";
                    });
                }
            });
            return false; //阻止表单跳转。如果需要表单跳转，去掉这段即可。
        });
    });
</script>
</body>

</html>